<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="../debug/debug.js"></script>

<script>
	var debug;
	
	function test1(){
		var obj={
			yes:function(){
				this.val=true;
			},
			no:function(){
				this.val=false;
			}
		};
		
		//현재 obj에 var 프로퍼티는 없음.
		debug.displayMsg(obj.val==null); //true
		//yes함수를 호출하면 obj 객체와 연결된 val프로퍼티의 값이 변한다. 
		obj.yes();
		debug.displayMsg(obj.val); //true
		
		window.no=obj.no;
		window.no();
		// obj객체는  그랟로 있고 컨텍스트가 window객체로  변했기때문에
		debug.displayMsg("obj.val:"+obj.val); //true
		//window.val프로퍼티는 값이 바뀌었다. (라인  28);
		debug.displayMsg("window.val:"+window.val); //false
		
	}
	
	// 아래 call,apply 메소드는 컨텍스트를 자연스럽게 변경해 준다.
	function changeColor(color){
		this.style.color = color;
	}
	
	//call 메소드 테스트 : call은 첫번째 인자를 컨텍스트로 설정하고 나머지 인자를 함수의 전달인자로 전달한다. 
	function testCall(mainElement){
		changeColor.call(mainElement,"green");
	}
	//apply메소드 테스트:첫번째 엘리먼트로 콘텍스트를 설정하고, 전달인자 배열인 두번째 전달인자는 함수의 전달인자로 넘긴다.
	function testApply(){
		changeColor.apply(document.body,arguments)  // textApply를 호출할대 전달한 인자 배열을 함수로 전달
	}
	
	function testCall2(){
		changeColor.call(document.getElementsByTagName("ul")[0],"yellow");
	}

	window.onload=function(e){
		debug =  new DebugConsole();
		test1();
		
		var main = document.getElementById("main");
		testCall(main);
		testCall(document.getElementsByTagName("ul")[0]);
		testApply("red");
		
	}
</script>
<body>
	<h1>body element</h1>
	<div id="main"><h2>main element</h2></div>
	<ul>
		<li>line  1</li>
		<li>line 2</li>
		<li>line3</li>
	</ul>
</body>
</html>